<template>
  <div class="container">
    <div class="left">
      <img src="../assets/cf.png" />
      <span>Vue3.0 + TypeScript</span>
    </div>
    <div class="wrapper">
      <div class="center">
        <div class="box" v-for="(item, index) in allCategory" :key="index" @click="debounce(index)" :ref="setRef">{{ item.name }}</div>
      </div>
      <div class="right">
        <el-icon @click="showInfo">
          <user-filled />
        </el-icon>
        <el-input v-model="input" class="w-50 m-2" placeholder="关键字/作者(回车搜索)" :suffix-icon="Search" />
        <el-button type="primary" :icon="EditPen" id="write" @click="write">发帖</el-button>
        <el-button @click="logout">退出登录</el-button>
      </div>
    </div>
  </div>
  <UserInfo ref="userinfo"></UserInfo>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { Search, EditPen } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import _ from 'lodash'
import { ElNotification } from 'element-plus'
import { UserFilled } from '@element-plus/icons'
import UserInfo from '@/components/userInfo.vue'
// eslint-disable-next-line
import Debounce from '../utils/debounce'
// header的头部分类接口, 对象数组接口
interface Item {
  name: string
}
interface List {
  // key值是string类型的数组就是对象字面量
  [index: number]: Item
}

// type比接口好的地方在于可以用typeof的返回值作为类型
// _dom的类型就是HTMLDivElement
let div = document.createElement('div')
type _dom = typeof div

export default defineComponent({
  name: 'Header',
  components: {
    UserFilled,
    UserInfo,
  },
  setup(props, context) {
    let allCategory = reactive<List>([
      { name: '综合' },
      { name: '前端' },
      { name: '后端' },
      { name: 'Android' },
      { name: 'iOS' },
      { name: '算法' },
      { name: '开发工具' },
    ])
    const input = ref('')

    // 用_dom类型作为泛型
    const myRef = ref<_dom[]>([])

    // 把dom结构传进数组
    const setRef = (el: _dom) => {
      myRef.value.push(el)
    }

    function changeCategory(index: number): void {
      // console.log(`${allCategory[index].name}被点击了`);
      for (let key in allCategory) {
        if (key == index.toString()) {
          // console.log(key, myRef.value[key].style);
          myRef.value[key].style.color = '#007fff'
          context.emit('getArticles', parseInt(key).toString())
        } else {
          myRef.value[key].style.color = '#646568'
        }
      }
    }
    const debounce = _.debounce(function (index: number): void {
      changeCategory(index)
    }, 500)
    const router = useRouter()
    const logout = function (): void {
      router.push('/login')
      localStorage.clear()
      ElNotification({
        title: 'OK~',
        message: '已退出该账号',
        position: 'top-right',
        type: 'success',
        duration: 1000,
      })
    }
    const write = function (): void {
      router.push('./write')
    }

    const userinfo = ref() //eleTable是页面ref后面对应的名字
    const showInfo = function () {
      userinfo.value.show()
    }
    return {
      allCategory,
      input,
      Search,
      EditPen,
      setRef,
      debounce,
      logout,
      write,
      showInfo,
      userinfo,
    }
  },
})
</script>

<style scoped lang="scss">
.container {
  height: 4rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25), 0px 4px 8px rgba(0, 0, 0, 0.8);
  background: #282a2e;
  color: white;
  position: fixed;
  z-index: 999;
  .left {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      color: #eee;
      font-weight: 700;
      font: 1rem Tahoma, Helvetica, Arial, '宋体', sans-serif;
    }
  }
  .wrapper {
    flex: 5;
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin-left: 1rem;
    .center {
      height: 100%;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      .box {
        white-space: nowrap;
        margin: 0 1.4rem;
        cursor: pointer;
      }
    }
    .right {
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
}
.el-input {
  width: 40%;
}
.el-icon {
  font-size: 1rem;
  cursor: pointer;
}
@media screen and (max-width: 730px) {
  .center {
    display: none !important;
  }
}
@media screen and (max-width: 490px) {
  .left {
    display: none !important;
  }
}
@media screen and (max-width: 365px) {
  #login {
    display: none !important;
  }
}
@media screen and (max-width: 290px) {
  #write {
    display: none !important;
  }
}
</style>